<!DOCTYPE html>
<html lang="en">
<head>
  <title>扫码提示</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <link href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.6.16/weui.min.css" rel="stylesheet">
</head>

<body data-weui-theme="light">
  <div class="page">
    <div class="weui-msg" id="confirmLogin">
      <div class="weui-msg__icon-area">
        <i class="weui-icon-info weui-icon_msg"></i>
      </div>
      <div class="weui-msg__text-area">
        <h4 class="icon-box__title">申请绑定微信号</h4>
        <br />
        <p class="weui-msg__tips">请确认是本人操作</p>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary" id="login">登录</a>
        </p>
        <br />
        <p class="weui-btn-area">
          <a href="javascript:" id="gohome" role="button" style="color: var(--weui-BRAND);"
             class="weui-btn weui-btn_default weui-btn_medium">拒绝</a>
        </p>
      </div>
    </div>

    <div class="weui-msg" id="loginSuccess" style="display: none;">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
        <h4 class="weui-msg__title">确认成功</h4>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a href="javascript:" id="homepage" role="button" style="color: var(--weui-BRAND);"
            class="weui-btn weui-btn_default weui-btn_medium">返回</a>
        </p>
      </div>
    </div>
  </div>

  <div role="alert" id="textToast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast weui-toast_text">
      <p class="weui-toast__content" id="toast_text"></p>
    </div>
  </div>
</body>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  var param = {
    'key': '[[${key}]]',
    'openid': '[[${openid}]]'
  };
  function showToast (msg) {
    var $textToast = $('#textToast');
    if ($textToast.css('display') != 'none') return;
    $("#toast_text").text(msg);
    $textToast.fadeIn(100);
    setTimeout(function () {
      $textToast.fadeOut(100);
    }, 2000);
  }

  function login () {
    $.ajax({
      type: 'POST',
      url: "[[${baseUrl}]]/user/login_confirm",
      data: JSON.stringify(param),
      headers: {
        "Authorization": "[[${token}]]"
      },
      contentType: 'application/json; charset=UTF-8',
      dataType: 'json',
      success: function (res) {
        if (res.code === 200) {
          $("#confirmLogin").css("display", 'none');
          $("#loginSuccess").css("display", 'block');
        } else {
          showToast(res.message);
        }
      },
      error: function (error) {
      }
    })
  }

  $('#login').on('click', function () {
    login();
  });
</script>

</html>